<template>
  <view>
    <view class="practive-main">
      <view>
        <view class="practive-top">
          <view class="practive-top-left">
            <view class="practive-top-left-1">每日一题</view>
            <view class="practive-top-left-2">今日已完成</view>
          </view>
          <view class="practive-top-right">

            <view>
              <view class="practive-top-right-1">
                <image src="/static/practice/alarm-line.png"></image>
              </view>
              <view class="practive-top-right-2">已打卡1天</view>
            </view>

          </view>
        </view>
        <view class="practive-middle">
          <view class="practive-middle-1"></view>
          <view class="practive-middle-2">刷题</view>
        </view>
        <view class="practive-bottom">
          <view class="practive-bottom-1">
            <view>
              <image src="/static/practice/flashlight-line.png"></image>
            </view>
            <view class="practive-bottom-2">随机刷题</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .practive-main {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .practive-top {
    width: 686rpx;
    height: 280rpx;
    background-image: linear-gradient(to right, #058AEF 0%, #0893E4 25%, #13A4D0 50%, #1BB7B6 100%);
    border-radius: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 28rpx;
  }

  .practive-top-left {
    width: 70%;
    height: 280rpx;
  }

  .practive-top-right {
    width: 30%;
    height: 280rpx;
  }

  .practive-top-left-1 {
    font-size: 40rpx;
    color: #FFFFFF;
    letter-spacing: 8rpx;
    margin-top: 50rpx;
    margin-left: 40rpx;
  }

  .practive-top-left-2 {
    width: 140rpx;
    color: #FFFFFF;
    font-size: 24rpx;
    border: 2rpx solid #FFFFFF;
    padding: 14rpx;
    margin-top: 60rpx;
    margin-left: 40rpx;
    border-radius: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .practive-top-right {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .practive-top-right-1 {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .practive-top-right-1 image {
    display: block;
    width: 80rpx;
    height: 80rpx;
  }

  .practive-top-right-2 {
    font-size: 28rpx;
    color: #FFFFFF;
    margin-top: 40rpx;
  }

  .practive-middle {
    display: flex;
    align-items: center;
    padding: 40rpx 20rpx 0rpx 20rpx;
  }

  .practive-middle-1 {
    width: 8rpx;
    height: 40rpx;
    background-color: #7AB8F2;
    border-radius: 30rpx;
  }

  .practive-middle-2 {
    font-size: 38rpx;
    color: #959494;
    margin-left: 20rpx;
  }

  .practive-bottom {
    margin-top: 30rpx;
  }

  .practive-bottom-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #D3E8FD;
    width: 320rpx;
    height: 112rpx;
    border-radius: 20rpx;
  }

  .practive-bottom-1 image {
    display: block;
    width: 38rpx;
    height: 38rpx;
  }

  .practive-bottom-2 {
    font-size: 38rpx;
    color: #3892FB;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>